<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="新闻详情 - 飞易腾科技">
    <title>新闻详情 - 飞易腾科技</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Tailwind CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="style/fyt.css" rel="stylesheet">
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg fixed-top">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <i class="fas fa-rocket"></i> 飞易腾科技
            </a>

            <button class="navbar-toggler" type="button" id="navToggle">
                <i class="fas fa-bars"></i>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto align-items-center">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="services.html">服务</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="cases.html">案例</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="news.html">新闻</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about.html">关于</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">联系</a>
                    </li>
                    <li class="nav-item">
                        <span class="dark-mode-toggle" id="darkModeToggle">
                            <i class="fas fa-moon"></i>
                        </span>
                    </li>
                </ul>
            </div>

            <!-- Mobile Menu -->
            <div class="mobile-menu" id="mobileMenu">
                <a class="nav-link" href="index.html">首页</a>
                <a class="nav-link" href="services.html">服务</a>
                <a class="nav-link" href="cases.html">案例</a>
                <a class="nav-link active" href="news.html">新闻</a>
                <a class="nav-link" href="about.html">关于</a>
                <a class="nav-link" href="contact.html">联系</a>
            </div>
        </div>
    </nav>

    <!-- Page Header -->
    <section class="page-header">
        <div class="hero-bg-image" style="background-image: url('https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?w=1920');"></div>
        <div class="hero-overlay"></div>
        <div class="mesh-bg"></div>
        <div class="tech-grid"></div>
        <div class="floating-elements">
            <div class="float-circle float-1"></div>
            <div class="float-circle float-2"></div>
            <div class="float-square float-4"></div>
        </div>
        <div class="container text-center">
            <div class="hero-badge fade-in">
                <i class="fas fa-newspaper"></i> 行业资讯
            </div>
            <h1 class="display-4 fw-bold mb-3">新闻详情</h1>
            <p class="lead mb-4">探索最新的技术趋势与行业动态,保持领先优势</p>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center">
                    <li class="breadcrumb-item"><a href="index.html">首页</a></li>
                    <li class="breadcrumb-item"><a href="news.html">新闻</a></li>
                    <li class="breadcrumb-item active">详情</li>
                </ol>
            </nav>
        </div>
    </section>

    <!-- News Detail Section -->
    <section class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <!-- 文章头部 -->
                    <article class="news-detail-article">
                        <div class="news-detail-header">
                            <div class="news-detail-tags mb-3">
                                <span class="news-tag">技术趋势</span>
                                <span class="news-tag">设计</span>
                            </div>
                            <h1 class="news-detail-title">2024年网站设计的10大趋势</h1>
                            <div class="news-detail-meta">
                                <span><i class="far fa-calendar-alt"></i> 2024-01-15</span>
                                <span><i class="far fa-eye"></i> 1.2k 阅读</span>
                                <span><i class="far fa-clock"></i> 8分钟阅读</span>
                            </div>
                        </div>

                        <!-- 文章封面图 -->
                        <div class="news-detail-cover mb-5">
                            <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200" alt="文章封面" class="img-fluid rounded">
                        </div>

                        <!-- 文章内容 -->
                        <div class="news-detail-content">
                            <p class="lead">
                                随着技术的不断发展和用户需求的变化，网站设计领域也在持续演进。2024年，我们看到了许多令人兴奋的设计趋势，这些趋势不仅提升了用户体验，也为品牌创造了更多的可能性。
                            </p>

                            <h2>1. 微交互设计</h2>
                            <p>
                                微交互是用户与界面互动时的小细节，如按钮的悬停效果、加载动画等。2024年，微交互设计变得更加精致和有意义，它们不仅提供视觉反馈，还能引导用户完成特定操作，提升整体用户体验。
                            </p>

                            <blockquote class="news-blockquote">
                                "好的设计是显而易见的，伟大的设计是透明的。" - Joe Sparano
                            </blockquote>

                            <h2>2. 3D元素与立体设计</h2>
                            <p>
                                随着WebGL和Three.js等技术的成熟，越来越多的网站开始使用3D元素。这些立体设计不仅吸引眼球，还能创造沉浸式的用户体验。从产品展示到品牌storytelling，3D设计为网站增添了新的维度。
                            </p>

                            <div class="news-image-grid">
                                <img src="https://images.unsplash.com/photo-1558655146-d09347e92766?w=600" alt="设计示例1" class="img-fluid rounded">
                                <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600" alt="设计示例2" class="img-fluid rounded">
                            </div>

                            <h2>3. 极简主义设计</h2>
                            <p>
                                "少即是多"的设计哲学在2024年依然流行。极简主义设计通过精简的布局、大量的留白和简洁的色彩方案，创造出清晰、专注的用户体验。这种设计风格特别适合内容密集型网站和应用。
                            </p>

                            <h2>4. 深色模式的普及</h2>
                            <p>
                                深色模式已经从一个可选功能变成了标配。它不仅能减少眼睛疲劳，节省电池电量，还能创造出独特的视觉氛围。2024年，我们看到越来越多的网站提供了精心设计的深色模式选项。
                            </p>

                            <h2>5. 个性化与动态内容</h2>
                            <p>
                                基于用户行为和偏好的个性化内容成为主流。通过AI和机器学习技术，网站能够为每个用户提供定制化的体验，从内容推荐到界面布局，都可以根据用户需求进行调整。
                            </p>

                            <h2>6. 可访问性优先</h2>
                            <p>
                                无障碍设计不再是事后的补充，而是设计过程中的核心考虑。遵循WCAG准则，确保所有用户，包括残障人士，都能轻松使用网站，这已成为设计师的基本职责。
                            </p>

                            <h2>7. 响应式排版</h2>
                            <p>
                                流体排版和可变字体的使用让文字在不同设备上都能呈现最佳效果。响应式排版不仅适应屏幕尺寸，还能根据用户偏好和环境光线进行调整。
                            </p>

                            <h2>8. 增强的动画效果</h2>
                            <p>
                                页面加载动画、滚动触发动画和页面转场效果变得更加流畅和自然。这些动画不仅美观，还能引导用户注意力，提升整体浏览体验。
                            </p>

                            <h2>9. 可持续设计</h2>
                            <p>
                                环保意识渗透到网站设计中。优化代码、减少服务器请求、使用绿色托管服务，这些都是可持续设计的体现。设计师开始考虑网站的碳足迹，努力创建更环保的数字产品。
                            </p>

                            <h2>10. AR/VR集成</h2>
                            <p>
                                增强现实和虚拟现实技术开始融入网站设计。从虚拟试穿到3D产品预览，这些技术为用户提供了前所未有的交互体验，特别是在电商和房地产领域。
                            </p>

                            <h2>总结</h2>
                            <p>
                                2024年的网站设计趋势反映了技术进步和用户需求的变化。作为设计师，我们需要在创新和实用性之间找到平衡，创造出既美观又功能强大的网站。这些趋势不是孤立的，它们可以相互结合，创造出独特而令人难忘的用户体验。
                            </p>

                            <p>
                                无论你是设计师、开发者还是企业主，了解并适当运用这些趋势，都能让你的网站在竞争激烈的数字世界中脱颖而出。记住，最好的设计不是追随所有趋势，而是选择最适合你的品牌和用户的设计方向。
                            </p>
                        </div>

                        <!-- 文章标签 -->
                        <div class="news-detail-tags-section">
                            <h4>相关标签</h4>
                            <div class="tech-tags">
                                <span class="tech-tag">网站设计</span>
                                <span class="tech-tag">UI/UX</span>
                                <span class="tech-tag">设计趋势</span>
                                <span class="tech-tag">用户体验</span>
                                <span class="tech-tag">前端开发</span>
                            </div>
                        </div>

                        <!-- 分享按钮 -->
                        <div class="news-detail-share">
                            <h4>分享文章</h4>
                            <div class="share-buttons">
                                <a href="#" class="share-btn share-wechat"><i class="fab fa-weixin"></i> 微信</a>
                                <a href="#" class="share-btn share-weibo"><i class="fab fa-weibo"></i> 微博</a>
                                <a href="#" class="share-btn share-qq"><i class="fab fa-qq"></i> QQ</a>
                                <a href="#" class="share-btn share-link"><i class="fas fa-link"></i> 复制链接</a>
                            </div>
                        </div>
                    </article>
                </div>

                <!-- 侧边栏 -->
                <div class="col-lg-4">
                    <div class="news-sidebar">
                        <!-- 最新文章 -->
                        <div class="news-sidebar-card mb-4">
                            <h3 class="news-sidebar-title">最新文章</h3>
                            <div class="related-news-item">
                                <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=200" alt="相关文章">
                                <div class="related-news-info">
                                    <h4>提升网站性能的12个优化技巧</h4>
                                    <p class="text-muted small"><i class="far fa-calendar-alt"></i> 2024-01-12</p>
                                </div>
                            </div>
                            <div class="related-news-item">
                                <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=200" alt="相关文章">
                                <div class="related-news-info">
                                    <h4>小程序开发的商业价值分析</h4>
                                    <p class="text-muted small"><i class="far fa-calendar-alt"></i> 2024-01-08</p>
                                </div>
                            </div>
                            <div class="related-news-item">
                                <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=200" alt="相关文章">
                                <div class="related-news-info">
                                    <h4>打造极致用户体验的设计原则</h4>
                                    <p class="text-muted small"><i class="far fa-calendar-alt"></i> 2024-01-05</p>
                                </div>
                            </div>
                        </div>

                        <!-- 热门标签 -->
                        <div class="news-sidebar-card mb-4">
                            <h3 class="news-sidebar-title">热门标签</h3>
                            <div class="tech-tags">
                                <span class="tech-tag">前端开发</span>
                                <span class="tech-tag">UI设计</span>
                                <span class="tech-tag">React</span>
                                <span class="tech-tag">小程序</span>
                                <span class="tech-tag">性能优化</span>
                                <span class="tech-tag">用户体验</span>
                                <span class="tech-tag">响应式设计</span>
                                <span class="tech-tag">JavaScript</span>
                            </div>
                        </div>

                        <!-- CTA -->
                        <div class="news-sidebar-card">
                            <h3 class="news-sidebar-title">需要帮助？</h3>
                            <p class="mb-3">如果您对网站设计或开发有任何疑问，欢迎联系我们的专业团队</p>
                            <a href="contact.html" class="cta-button w-100 text-center">
                                立即咨询 <i class="fas fa-arrow-right ms-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="友links-section">
                <h4 class="text-center mb-4" style="color: white; font-weight: 600;">友情链接</h4>
                <div class="row">
                    <div class="col-12">
                        <div class="friendly-links">
                            <a href="https://www.aliyun.com" target="_blank" class="friendly-link">阿里云</a>
                            <a href="https://cloud.tencent.com" target="_blank" class="friendly-link">腾讯云</a>
                            <a href="https://www.huaweicloud.com" target="_blank" class="friendly-link">华为云</a>
                            <a href="https://github.com" target="_blank" class="friendly-link">Github</a>
                            <a href="https://www.bootcdn.cn" target="_blank" class="friendly-link">BootCDN</a>
                            <a href="https://www.npmjs.com" target="_blank" class="friendly-link">NPM</a>
                            <a href="https://developer.mozilla.org" target="_blank" class="friendly-link">MDN</a>
                            <a href="https://stackoverflow.com" target="_blank" class="friendly-link">StackOverflow</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-center my-5">
                <div class="footer-links mb-4">
                    <a href="#" class="social-icon" title="微信"><i class="fab fa-weixin"></i></a>
                    <a href="#" class="social-icon" title="微博"><i class="fab fa-weibo"></i></a>
                    <a href="#" class="social-icon" title="Github"><i class="fab fa-github"></i></a>
                    <a href="#" class="social-icon" title="领英"><i class="fab fa-linkedin"></i></a>
                    <a href="#" class="social-icon" title="Twitter"><i class="fab fa-twitter"></i></a>
                </div>
                <p class="mb-2" style="font-size: 1rem;">&copy; 2024 飞易腾科技 版权所有</p>
                <p class="text-muted small mb-4">专注于创新的网站建设服务 | 飞速响应 · 易用体验 · 腾飞助力</p>
            </div>

            <div class="footer-bottom">
                <div class="row align-items-center">
                    <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
                        <div class="qrcode-section">
                            <div class="qrcode-item">
                                <div class="qrcode-placeholder">
                                    <i class="fab fa-weixin" style="font-size: 4rem; color: #07c160;"></i>
                                    <p class="mt-2 mb-0" style="font-size: 0.85rem;">微信公众号</p>
                                </div>
                            </div>
                            <div class="qrcode-item">
                                <div class="qrcode-placeholder">
                                    <i class="fas fa-qrcode" style="font-size: 4rem; color: #6366f1;"></i>
                                    <p class="mt-2 mb-0" style="font-size: 0.85rem;">微信小程序</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8 col-md-6">
                        <div class="beian-info">
                            <p class="mb-2">
                                <i class="fas fa-shield-alt me-2"></i>
                                <a href="https://beian.miit.gov.cn" target="_blank" class="beian-link">粤ICP备2024123456号-1</a>
                            </p>
                            <p class="mb-2">
                                <i class="fas fa-balance-scale me-2"></i>
                                <a href="http://www.beian.gov.cn" target="_blank" class="beian-link">
                                    <img src="" alt="" class="me-1" style="vertical-align: text-bottom;">
                                    粤公网安备 44030502000000号
                                </a>
                            </p>
                            <p class="mb-2">
                                <i class="fas fa-copyright me-2"></i>
                                增值电信业务经营许可证：粤B2-20240000
                            </p>
                            <p class="mb-0 small text-muted">
                                <i class="fas fa-map-marker-alt me-2"></i>
                                公司地址：广东省深圳市南山区科技园南区深圳湾科技生态园
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="footer-disclaimer">
                <p class="mb-0 small">
                    本网站所有内容及图片均受法律保护，未经许可不得转载、复制或镜像。
                    <span class="mx-2">|</span>
                    网站内容仅供参考，不作为任何法律依据。
                </p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>

    <script>
        // Navbar Scroll Effect
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

        // Mobile Menu Toggle
        const navToggle = document.getElementById('navToggle');
        const mobileMenu = document.getElementById('mobileMenu');

        navToggle?.addEventListener('click', function() {
            mobileMenu.classList.toggle('active');
        });

        // Dark Mode Toggle
        const darkModeToggle = document.getElementById('darkModeToggle');
        const body = document.body;

        if (localStorage.getItem('darkMode') === 'enabled') {
            body.classList.add('dark-mode');
            darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
        }

        darkModeToggle.addEventListener('click', function() {
            body.classList.toggle('dark-mode');

            if (body.classList.contains('dark-mode')) {
                localStorage.setItem('darkMode', 'enabled');
                darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
            } else {
                localStorage.setItem('darkMode', null);
                darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>';
            }
        });

        // Scroll Animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);

        document.querySelectorAll('.fade-in').forEach(element => {
            observer.observe(element);
        });
    </script>
</body>
</html>
